/*
  @desc 图表显示
  @props data           [Object]  图表参数信息
  @props resize         [Boolean]  刷新图表状态值
  @props heightNum      [Number]  设置图表的高度
 */
<script>
import { mapState, mapMutations } from 'vuex'
import 'v-charts/lib/style.css'
import 'echarts/lib/component/dataZoom'
import list from './list'
export default {
  name: 'Echarts',
  mixins: [list],
  props: {
    data: Object,
    isLoading: {
      type: Boolean,
      default: false
    },
    refName: {
      type: String,
      default: undefined
    },
    resize: {
      type: [Boolean],
      default: undefined
    },
    heightNum: {
      type: Number,
      default: 320
    },
    widthNum: null
  },
  render: function (createElement) {
    return createElement(
      'div',
      {
        'class': {
          echars: true
        }
      },
      [
        createElement(
          `ve-${this.chartSettings.type}`,
          {
            props: {
              data: this.chartData,
              width: this.width,
              height: this.minHeight,
              toolbox: this.data.toolbox,
              loading: this.isLoading,
              dataEmpty: this.dataEmpty,
              settings: this.chartSettings,
              dataZoom: this.data.dataZoom,
              events: this.data.chartEvents,
              colors: this.data.colors,
              extend: this.extend,
              afterConfig: this.afterConfig
            },
            ref: this.refName
          }
        )
      ]
    )
  },
  computed: {
    ...mapState({
      mode: state => state.user.mode
    })
  },
  watch: {
    mode (val) {
      this.updataChart()
    },
    'data.data': {
      handler (newValue, oldValue) {
        if (this.isResize) { return }
        if (typeof this.resize === 'boolean') { this.isResize = true }
        this.updataChart()
      },
      deep: true,
      immediate: true
    },
    resize () {
      this.updataChart()
    }
  },
  created () {
    this.setRefresheChar(false)
  },
  mounted () {
    this.minHeight = this.heightNum + 'px'
    this.width = this.widthNum ? this.widthNum + 'px' : 'auto'
    this.updataChart()
    this.$nextTick(() => {
      if (!this.refName) { return }
      this.setRefresheChar(true)
      this.setRefresheCharList({
        name: this.refName,
        vm: this.$refs[this.refName]
      })
    })
  },
  data () {
    this.chartSettings = this.data.chartSettings || { type: 'line' }
    return {
      isResize: false,
      extend: {},
      chartData: {
        columns: [],
        rows: []
      },
      minHeight: '320px',
      dataEmpty: false
    }
  },
  methods: {
    ...mapMutations(['setRefresheChar', 'setRefresheCharList']),
    updataChart () {
      this.dataEmpty = true
      let mode = localStorage.getItem('mode') || 'light'
      let color = mode === 'light' ? '#000' : '#a9a9a9'
      this.chartData.columns = [...this.data.data.columns]
      this.chartData.rows = [...this.data.data.rows]

      this.chartSettings = this.data.chartSettings || { type: 'line' }
      this.extend = Object.assign({}, this.extend, this.data.extend)

      if (this.chartData.columns.length && this.chartData.rows.length) {
        this.dataEmpty = false
      }

      if (!this.chartSettings.type) {
        this.chartSettings = Object.assign({}, this.chartSettings, {
          type: 'line'
        })
      }

      if (this.extend.legend &&
        this.extend.legend.textStyle &&
        !this.extend.legend.textStyle.color) {
        this.extend.legend.textStyle = Object.assign({}, this.extend.legend.textStyle, {
          color: color
        })
      }

      if (this.extend.legend && !this.extend.legend.textStyle) {
        this.extend.legend = Object.assign({}, this.extend.legend, {
          textStyle: {
            color: color
          }
        })
      }

      if (!this.extend.legend) {
        this.extend = Object.assign({}, this.extend, {
          legend: {
            textStyle: {
              color: color
            }
          }
        })
      }

      if (!this.data.axisLabelColor) {
        this.extend.axisLabel = Object.assign({}, this.extend.axisLabel, {
          color: color
        })
      }
    },
    // 用于适配series数组配置
    afterConfig (options) {
      const series = this.extend.series
      if (!series || !series.length) {
        return options
      }
      options.series.map((item, index) => {
        item = Object.assign({}, item, series[index])
        options.series.splice(index, 1, item)
      })
      return options
    }
  }
}
</script>

<style lang="scss" scoped>
.echars {
  // height: 320px;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}
</style>
